<template>
  <div class="login">
      <div class="goBack"><van-icon name="arrow-left" @click="goBack"/></div>
      <div class="topContent">
        <dl>
          <dt><img src="https://s3.pstatp.com/growth/fe_sdk/image/banner_toutiao_icon_bce0b302.png" class="titleImg"><p>账号登录</p></dt>
          <dd>登录表示同意<span>"用户协议"</span>和<span>"隐私政策"</span></dd>
        </dl>
      </div>
      <div class="mainContent">
        <form>
          <p>
            <span @click="gophone">+86<van-icon name="arrow-down" class="iconPhtoto"/></span>
            <input type="number" name="uname" placeholder="手机号/邮箱" v-model="uname" >
          </p>
          <p class="p-last">
            <input type="password" name="upwd" placeholder="密码" v-model="upwd">
            <span>找回密码</span>
          </p>
          <div class="gotoLogin" @click="gotoLogin"><van-icon name="down" class="rightIcon"/></div>
        </form>
      </div>
      <van-popup
      v-model="phoneShow"
      closeable
      close-icon="arrow-left"
      position="right"
      close-icon-position="top-left"
      :style="{ width: '100%',height:'100%' }">
      <div class="van-bar">
          <van-index-bar >
            <van-index-anchor index="常用"  class="van-Top"/>
            <van-cell title="中国大陆" />
            <van-cell title="中国香港" />
            <van-cell title="中国澳门" />
            <van-cell title="中国台湾" />
            <van-index-anchor index="A" class="van-Top"/>
            <van-cell title="阿尔巴尼亚" />
            <van-cell title="阿尔及利亚" />
            <van-cell title="阿富汗" />
            <van-cell title="阿根挺" />
            <van-cell title="爱尔兰" />
            <van-cell title="埃及" />
            <van-cell title="埃塞俄比亚" />
            <van-cell title="爱沙尼亚" />
            <van-cell title="阿拉伯联合酋长国" />
            <van-cell title="阿曼" />
          </van-index-bar>
      </div>
      </van-popup>
      <router-link to="register">
      <div class="goReg"><p @click="goReg">没有账号?去注册!</p></div>
      </router-link>
  </div>
</template>
<script>
export default {
  data: () => ({
    phoneShow: false,
    regShow: false,
    uname: '',
    upwd: ''
  }),
  created () {
  },
  methods: {
    gophone () {
      this.phoneShow = true
    },
    goReg () {
      this.regShow = true
    },
    gotoLogin () {
      if (this.uname === '' || this.upwd === '') {
        this.$toast('请输入用户名或密码')
      } else if (!(/^1[3456789]\d{9}$/.test(this.uname))) {
        this.$toast('用户名格式不正确')
      } else {
        this.$http.post('/api/login', { uname: this.uname, upwd: this.upwd }).then((res) => {
          const { data: { status, message, data } } = res
          if (status !== 0) return this.$toast.fail('用户名或密码错误')
          this.$toast.success(message)
          //   this.users.push({ uname: this.uname, upwd: this.upwd })
          localStorage.setItem('users', JSON.stringify(data))
          setTimeout(function () {
            location = '//localhost:8080/#/home'
          }, 1500)
        })
      }
    },
    goBack () {
      history.back()
    }
  }
}
</script>
<style lang="less" scoped>
    .goBack{
        width: 100%;
        height: 20px;
        position: fixed;
        top:20px;
        left: 20px;
    }
      dl{
    padding: 40px 0 0 0;
    display: flex;
    flex-direction: column;
      dt{
        display: flex;
        align-items: center;
        margin: 0;
        .titleImg{
          display: block;
          border: 1px solid #e9e8e8;
          border-radius: 6px;
          width: 40px;
          height: 40px;
          margin-left: 35px
        }
        p{
          font-size: 28px;
          padding-left: 10px
        }
      }
      dd{
        margin-top:-20px;
        font-size: 14px;
        color: #c0c0c0;
        letter-spacing:1px;
        span{
          color: #837f7f;
        }
      }
    }
    .mainContent{
      margin-top: 60px;
      p{
        width: 80%;
        height: 30px;
        margin-left: 35px;
        border-bottom: 1px solid #d3cece;
        .iconPhtoto{
          margin-left: 5px;
          margin-right: 10px;
          font-size: 11px;
          color: #000000;
        }
        input{
          margin-left: 2px;
          border:0px;
          font-size: 18px;
        }
      }
      .p-last{
        display: flex;
        justify-content: space-between;
        align-items: center;
        span{
          font-size: 13px;
          color: #837f7f
        }
        input{
          margin-bottom: 2px;
        }
      }
      .gotoLogin{
        width: 65px;
        height: 65px;
        border-radius: 50%;
        background: #dddada;
        text-align: center;
        margin: 0 auto;
        margin-top:60px;
        .rightIcon{
          font-size: 30px;
          color: #ffffff;
          transform: rotate(-90deg);
          margin-top:17px;
        }
      }
    }
    .van-bar{
      margin-top:35px;
      .van-Top{
        height: 30px;
        display: block;
        background: #f5f5f5;
        .van-index-anchor{
          font-size: 12px !important;
        }
      }
    }
    .goReg{
      width: 80%;
      margin: 0 auto;
      text-align: center;
      font-size: 12px;
      color: #c0c0c0;
      margin-top: 50px;
    }
    .checkText{
      width: 80%;
      color: #c0c0c0;
      font-size: 13px;
      text-align: center;
      margin-left: 35px;
      display: flex;
      span{
        color: #837f7f;
      }
    }
</style>
